<template>
	<view class="contain">
		<scroll-view scroll-y class="scroll-view">
			<view class="h-head">
				<view class="h-user">
					<view class="h-avatar iconfont icon-account" />
					<!-- <image v-else @click="bindViewTap" :src="avatarUrl" mode="cover"></image> -->
					<button open-type="getUserInfo" @getuserinfo="userInfoBind">点此登录</button>
					<!-- <text v-else class="userinfo-nickname">{{ nickName }}</text> -->
				</view>
			</view>
			<view class="h-item" @click="categoryBind">
				<view class="h-lable">自定义分类</view>
				<view class="h-value">可自定义分类</view>
			</view>
			<view class="h-item" @click="passwordBind">
				<view class="h-lable">设置主密码</view>
				<view class="h-value">主密码用于加密数据</view>
			</view>
			<view class="h-item">
				<view class="h-lable">开启指纹认证</view>
				<switch class="h-switch" @change="fingerPrintChange" />
			</view>
			<view class="h-item">
				<view class="h-lable">开启云同步</view>
				<switch class="h-switch" @change="autoCloudChange" />
			</view>
			<view class="h-item" @click="textExportBind">
				<view class="h-lable">原文导出</view>
				<view class="h-value">获取已解密的数据</view>
			</view>
			<view class="h-item" @click="formatInputBind">
				<view class="h-lable">格式化导出</view>
				<view class="h-value">导出json格式数据</view>
			</view>
			<view class="h-item" @click="clearDataBind">
				<view class="h-lable">清空数据</view>
				<view class="h-value">清空所有钥匙</view>
			</view>
			<view class="h-item" @click="formatDataBind">
				<view class="h-lable">格式化</view>
				<view class="h-value">重置小程序内所有数据</view>
			</view>
			<view class="h-item" @click="guideBind">
				<view class="h-lable">使用指南</view>
				<view class="h-value"></view>
			</view>
			<view class="h-item" @click="problemBind">
				<view class="h-lable">常见问题</view>
				<view class="h-value"></view>
			</view>
			<view class="h-item" @click="updateLogBind">
				<view class="h-lable">更新记录</view>
				<view class="h-value"></view>
			</view>
			<view class="h-item" @click="aboutBind">
				<view class="h-lable">关于</view>
				<view class="h-value"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		methods: {
			//用户登陆
			userInfoBind: function() {},
			getWxUserInfo: function() {},

			//自定义分类
			categoryBind: function() {
				uni.navigateTo({ url: 'childpages/category/category' });
			},

			//设置主密码
			passwordBind: function() {},

			//指纹设置
			fingerPrintChange(event) {},

			//开启云同步
			autoCloudChange: function(event) {},

			//原文导出
			textExportBind: function(event) {
				uni.navigateTo({ url: 'childpages/dataexport/dataexport?exportType=1' });
			},

			//格式化导出
			formatInputBind: function(event) {
				uni.navigateTo({ url: 'childpages/dataexport/dataexport?exportType=2' });
			},

			//格式化导入
			formatExportBind: function(event) {
				uni.navigateTo({ url: 'childpages/dataexport/dataexport?exportType=3' });
			},

			//输入框
			inputInputBind: function(event) {},

			//重置弹出框
			initModal: function() {},

			//弹出框 取消
			cancelBind: function(event) {},

			//弹出框 确定
			okBind: function(event) {},

			//清空数据
			clearDataBind: function() {},

			clearData: function() {},

			//格式化数据
			formatDataBind: function() {},

			formatData: function() {},

			//指南
			guideBind: function() {
				uni.navigateTo({ url: 'childpages/guide/guide' });
			},

			//常见问题
			problemBind: function() {
				uni.navigateTo({ url: 'childpages/problem/problem' });
			},

			//更新记录
			updateLogBind: function() {
				uni.navigateTo({ url: 'childpages/updatelog/updatelog' });
			},

			// 关于
			aboutBind: function() {
				uni.navigateTo({ url: 'childpages/about/about' });
			},
		}
	};
</script>
<style>
	.contain {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll
	}

	.contain::-webkit-scrollbar {

		width: 0;
		height: 0;
		color: transparent;
		display: none
	}

	.scroll-view {
		height: 100%;
		background-color: #fafafa;
	}

	.h-head {
		height: 370rpx;
		width: 100vw;
		background: linear-gradient(#16ba98, #4ec6c7);
	}

	.h-head .h-user {
		padding-top: 60rpx;
		padding-left: 60rpx;
		display: flex;
		align-items: center;
	}

	.h-head .h-avatar {
		display: block;
		margin-right: 40rpx;
		width: 160rpx;
		height: 160rpx;
		line-height: 150rpx;
		text-align: center;
		color: #909090;
		background-color: #fafafa;
		font-size: 90rpx;
		border-radius: 50%;
		box-sizing: content-box;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.h-head image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #fafafa;
		margin-right: 40rpx;
	}

	.h-head button {
		color: #fff;
		margin-left: 0;
		margin-right: 0;
		background-color: transparent;
	}

	.h-head button::after {
		border: none;
	}

	.h-head text {
		color: #fff;
	}

	/* 主体 */

	.h-item {
		position: relative;
		padding: 15rpx 40rpx;
		margin: 20rpx 0rpx;
		height: 80rpx;
		display: flex;
		background: #fff;
		align-items: center;
		line-height: 1.4;
		font-size: 14px;
		overflow: hidden;
	}

	.h-lable {
		flex: 1;
		font-size: 16px;
	}

	.h-value {
		position: relative;
		text-align: right;
		padding-right: 35rpx;
		font-size: 14px;
		color: #80848f;
	}

	.h-switch {
		position: relative;
		text-align: right;
	}

	.h-value::after {
		content: ' ';
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 50%;
		right: 10rpx;
		border-width: 2px 2px 0 0;
		border-color: #dddee1;
		border-style: solid;
		transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	}

	.h-input {
		padding: 50rpx 40rpx;
	}

	.h-input input {
		height: 2orpx;
		font-size: 40rpx;
		color: #000;
	}

	.h-modal-bar {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		border-top: 1rpx solid #e9eaec;
	}

	.h-bar-cancel {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		color: #757575;
	}

	.h-bar-ok {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		border-left: 1rpx solid #e9eaec;
		color: #2d8cf0;
	}
</style>